<template>
	<div style="overflow-y: scroll;height: 2000px;">
		<div class="h-h-sa-v-center" style="width: 90%; margin: 0 auto;height: auto; margin-top: 0px; align-items: flex-start;">
		  <div style="flex: 6;">
		    
		    <div style="height: calc(90vh); overflow-y: scroll; margin-right: 30px;" class="h-hv-start-fw">
		      <div @click="chooseArticle(index)" v-for="(item,index) in articleList">
		        <div class="report-box">
		          <h3>《{{item.title}}》</h3>
		          <br />
		          <div class="content" v-html='item.content'></div>
		        </div>
		        <div style="margin: 0 30px; width: 100%;" class="h-h-start-v-center">
		          <Avatar style="margin-right: 20px;" :src="item.avatar" />
		          <span>{{item.nickname}}</span>
		        </div>
		      </div>
		
		    </div>
		  </div>
		  <div :style="{
		        flex:phoneSize=='small'?'2':'5'
		  }">
		    <div style="margin: 30px auto; font-size: 18px;width: 60%;" class="h-h-sa-v-center">
		      <span @click="changePhoneSize" :style="{
		        color: phoneSize=='small'?'#A33535':'#000'
		      }">iphone</span>
		      <Divider type="vertical" />
		      <span @click="phoneSize='big'" :style="{
		        color: phoneSize=='big'?'#A33535':'#000'
		      }">ipad</span>
		    </div>
		    <div style="height:calc(76vh); position: relative;border-radius: 15px;margin-bottom: 30px; overflow:scroll;flex: 15;" :style="{width:phoneSize=='big'?'100%':'100%'}" class="demo-split v-h-start-v-start">
		      <h3 style="margin:15px 0 15px 15px">
		        <Icon type="ios-arrow-back" style="margin-bottom:3px; margin-right:10px" size="20" />商品详情</h3>
		      <div style="width: 100%;" class="v-hv-center">
		        <img :style="{
		          width:phoneSize=='small'?'100%':'50%'
		        }" :src="picture" alt="">
		      </div>
		      <div class="v-hv-center" style="margin:10px 20px; font-size: 16px;">
		        <h1 :style="{
		          textAlign: phoneSize=='big'?'center':'left'
		        }">{{title}}</h1><br />
		        <div v-html="valueHtml"></div>
		      </div>
		      
		    </div>
			<div class="h-h-sa-v-center" style="width:100%; height:45px; background-color:#cc2200;">
				<span style="color:#fff;font-size:16px;font-weight:bold;">通过</span>
			  <span style="color:#fff;font-size:16px;font-weight:bold;">不通过</span>
			</div>
		    
		  </div>
		
		</div>
	</div>
</template>

<script>
	import { getAllArticle } from '../../../../API/index.js'
	export default{
		data(){
			return{
				phoneSize:'small',
				title:'罗永浩收购苹果',
				valueHtml:'<p>理解万岁,苹果要完,理解万岁,苹果要完理解万岁,苹果要完理解万岁,苹果要完理解万岁,苹果要完理解万岁,苹果要完理解万岁,苹果要完</p>',
				articleList:[],
				picture:''
			}
		},
		created() {
			this.getAllArticle()
		},
		methods:{
			transformHtml(e, reder) {
				console.log(e, reder);
				this.valueHtml = reder;
			},
			getAllArticle(){
				let data = {
					cate:null
				}
				getAllArticle(data).then(res=>{
					console.log(res)
					this.articleList = res.data.data
				})
			},
			changePhoneSize(){
				this.phoneSize='small'
				this.$forceUpdate()
			},
			chooseArticle(index){
				this.title = this.articleList[index].title
				this.valueHtml = this.articleList[index].content
				this.picture = this.articleList[index].picture
				// this.phoneSize = 'small'
				console.log(this.phoneSize)
				
			}
		}
	}
</script>

<style>
	.report-box {
	  width: 170px; 
	  height: 250px;
	  box-shadow: rgb(0 0 0 / 10%) 0px 2px 12px 0px;
	  padding: 30px;
	  margin: 30px 30px 20px 20px;
	}
	
	.demo-split {
	  /* width:48%; */
	  /* height: 200px; */
	  box-shadow: rgb(0 0 0 / 10%) 0px 2px 12px 0px;
	}
	.demo-split::-webkit-scrollbar {
	    width: 0 !important;
	    height: 0 !important; 
	}
	
	.demo-split-pane {
	  padding: 10px;
	}
	img{
		width: 100%;
	}
	.content{
		 text-overflow: -o-ellipsis-lastline;
		  overflow: hidden;
		  text-overflow: ellipsis;
		  display: -webkit-box;
		  -webkit-line-clamp: 6;
		  line-clamp: 2;
		  -webkit-box-orient: vertical;
	}
</style>
